<template>
  <div class="flex">
    <!-- 文章 -->
    <div
      class="w-full Container lg:py-8 lg:border-l lg:border-r relative"
      :class="{ 'lg:w-3/4': !doc.fullScreen }"
    >
      <!-- 宽屏切换 -->
      <i
        class="hidden lg:block el-icon-c-scale-to-original absolute top-0 right-0 z-30 Icon Icon-text"
        @click="doc.fullScreen = !doc.fullScreen"
      ></i>

      <!-- 关键，使用`@tailwindcss/typography`的`prose`主题渲染`HTML` -->
      <article
        class="w-full prose prose-sm lg:prose-lg max-w-none dark:prose-dark mb-4 lg:mb-8"
      >
        <h1 id="title" class="text-center">{{ doc.title }}</h1>
        <div
          id="author"
          class="author text-right text-gray-500 dark:text-gray-100 text-base pr-6 lg:pr-12"
        >
          作者：{{ doc.author }}
        </div>

        <NuxtContent :document="doc" />
      </article>

      <!--      <NcGitalk :document-id="doc.id"></NcGitalk>-->
      <NcGitalk2 :document-id="doc.id"></NcGitalk2>

      <BtnNavPrevNext :prev="prev" :next="next"></BtnNavPrevNext>
    </div>

    <!-- 导航栏，粘性有讲究 -->
    <CompToc
      v-if="!doc.fullScreen && doc.toc.length"
      :toc="doc.toc"
      class="hidden lg:block lg:w-1/4 h-full Container"
    ></CompToc>
  </div>
</template>

<script>
import Vue from 'vue'
import NcGitalk2 from '@/components/comment-comp/NcGitalk2'
import BtnCopyCode from '~/components/global/btn/BtnCopyCode'
import BtnNavPrevNext from '~/components/global/btn/BtnNavPrevNext'
import CompToc from '~/components/layout-comp/CompToc'

export default {
  name: 'NcCompBlogContent',
  components: { NcGitalk2, CompToc, BtnNavPrevNext, BtnCopyCode },
  props: {
    doc: Object,
    prev: Object,
    next: Object,
  },
  mounted() {
    setTimeout(() => {
      const blocks = document.getElementsByClassName('nuxt-content-highlight')

      for (const block of blocks) {
        const CopyButton = Vue.extend(BtnCopyCode)
        const component = new CopyButton().$mount()
        block.appendChild(component.$el)
      }
    }, 100)
  },
  head() {
    return {
      title: this.doc.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.doc.description,
        },
        // Open Graph
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.doc.title,
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.doc.description,
        },
      ],
    }
  },
}
</script>
